---
title: Mintlify Cheat Sheet
--- 

This is a cheat sheet of what is used for making the Mintlify documentation on Quivr.
Use these components to make the website look like the documentation.

Accordion example to group information

<AccordionGroup>
  <Accordion title="FAQ without Icon">
    Example One

  </Accordion>

  <Accordion title="FAQ with Icon" icon="alien-8bit">
    Check out the [Accordion](/content/components/accordion) docs for all the supported props.
  </Accordion>

  <Accordion title="FAQ without Icon">
    Check out the [Accordion](/content/components/accordion) docs for all the supported props.
  </Accordion>
</AccordionGroup>


Cards and cards groups that use font awesome icons

<CardGroup cols={2}>
  <Card title="First Card" icon="square-1">
    Neque porro quisquam est qui dolorem ipsum quia dolor sit amet
  </Card>
  <Card title="Second Card" icon="square-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit
  </Card>
  <Card title="Third Card" icon="square-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
  </Card>
  <Card title="Fourth Card" icon="square-4">
    Excepteur sint occaecat cupidatat non proident
  </Card>
</CardGroup>


Steps


<Steps>
  <Step title="First Step">
    These are instructions or content that only pertain to the first step.
  </Step>
  <Step title="Second Step">
    These are instructions or content that only pertain to the second step.
  </Step>
  <Step title="Third Step">
    These are instructions or content that only pertain to the third step.
  </Step>
</Steps>

Use callouts to add eye-catching context to your content
​
Note Callouts
This adds a note in the content

<Note>This adds a note in the content</Note>
​
Warning Callouts
This raises a warning to watch out for

<Warning>This raises a warning to watch out for</Warning>
​
Info Callouts
This draws attention to important information

<Info>This draws attention to important information</Info>
​
Tip Callouts
This suggests a helpful tip

<Tip>This suggests a helpful tip</Tip>

Image Frame
Use the Frame component to wrap images or other components in a container.
Frames are very helpful if you want to center an image.


Customize component styles with Tailwind CSS. Simply add className="tailwind styles" onto the component

<Frame>
  <img src="/path/image.jpg" />
</Frame>


And Even Tabs

<Tabs>
  <Tab title="First Tab">
    ☝️ Welcome to the content that you can only see inside the first Tab.
  </Tab>
  <Tab title="Second Tab">
    ✌️ Here's content that's only inside the second Tab.
  </Tab>
  <Tab title="Third Tab">
    💪 Here's content that's only inside the third Tab.
  </Tab>
</Tabs>

End of the cheat sheet.